<template>
    <div>
        <!--        全屏模式-->
        <div class="w-full h-full bg-gray-700 text-white relative">
            <!--            头部区域-->
            <dv-border-box-8 class="w-full h-32">
                <div class="flex  flex-row justify-center text-center items-center h-full">
                    <div class="flex flex-col align-center ">
                        <dv-decoration-7 style="width:200px;height:40px;">
                            <span class="text-2xl">语沐数据中心</span>
                        </dv-decoration-7>
                    </div>
                </div>

            </dv-border-box-8>
            <!--        内容区域-->
            <div class="dv-content col-span-8 ">
                <div class="dv-content-top grid grid-cols-12 ">
                    <div class="col-span-8  w-full h-full flex flex-col">
                        <div class="flex flex-col items-center">
                            <div class="text-center text-xl">信息占比
                            </div>
                            <div v-if="config.data.length!==0" class="center">
                                <dv-active-ring-chart :config="config" style="width:300px;height:300px"/>
                            </div>
                        </div>

                    </div>
                    <div class="col-span-4  w-full h-full">
                        <div class="flex flex-col items-center">
                            <div class="text-center text-xl">分类统计
                            </div>
                            <div v-if="config.data.length!==0" class="center">
                                <!--                                <dv-active-ring-chart :config="config" style="width:300px;height:300px"/>-->
                                <dv-capsule-chart :config="config" style="width:300px;height:200px"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--底部时间-->
            <div>
                <div class="w-full text-center absolute bottom-1">
                    <span class="bottom-1">当前时间：{{ nowDate }}</span>
                </div>


            </div>

        </div>

        <div>
        </div>

    </div>
</template>

<script>

export default {
    route: {path: '', meta: {title: '数据中心'}},
    data() {
        return {
            config: {
                data: [],
                lineWidth: 10,
                digitalFlopStyle: {
                    fontSize: 20
                },
                showOriginValue: true,
                color: ['#F59E0B', '#10B981', '#EF4444', '#2563EB']
            },
            nowDate: ''
        }
    },
    async created() {
        let temp = await this.axios.get('admin/bigdata/count')
        temp.forEach((item) => {
            this.config.data.push({name: item.name, value: item.count})
        })
    },
    mounted() {
        this.currentTime();
    },
    methods: {
        currentTime() {
            setInterval(this.formatDate, 500);
        },
        formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
        }
    },
// 销毁时清除计时器
    // 销毁定时器
    beforeDestroy() {
        if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
        }
    }

}
</script>

<style lang="scss">
.dv-full-screen {
    background-color: #000;
    color: white;
}
</style>
